<template>
  <el-container>
    <el-main>
      <el-row class="config-row">
        <el-col :span="4" class="label">阅读主题</el-col>
        <el-col :span="20">
          <color-selector v-model="selectedColor" :candidateColors="candidateColors"></color-selector>
        </el-col>
      </el-row>
      <el-row class="config-row">
        <el-col :span="4" class="label">正文字体</el-col>
        <el-col :span="20">
          <el-radio-group v-model="selectedFont" size="small">
            <el-radio-button v-for="(f, i) in fonts" :label="f" :key="i" @click="selectFont(f)"></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row class="config-row">
        <el-col :span="4" class="label">字体大小</el-col>
        <el-col :span="20">
          <el-button-group>
            <el-button @click="decreaseFontSize">-</el-button>
            <el-button>{{ fontSize }}</el-button>
            <el-button @click="increaseFontSize">+</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row class="config-row">
        <el-col :span="4" class="label">页面宽度</el-col>
        <el-col :span="20">
          <el-button-group>
            <el-button 
              @click="decreasePageWidth"
              :style="{ color: selectedPageWidthButton === 'narrow' ? '#409EFF' : '' }"
            >窄</el-button>
            <el-button 
              @click="middlePageWidth" 
              :style="{ color: selectedPageWidthButton === 'middle' ? '#409EFF' : '' }"
            >中</el-button>
            <el-button 
              @click="increasePageWidth" 
              :style="{ color: selectedPageWidthButton === 'wide' ? '#409EFF' : '' }"
            >宽</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="config-footer">
      <el-button type="warning" @click="onSave">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-footer>
  </el-container>
</template>

<script>
import ColorSelector from "../util/ColorSelector.vue";

export default {
  components: {
    ColorSelector
  },
  data() {
    return {
      radio: "",
      configs: {
        theme: "theme-0",
        font: "雅黑",
        fontSize: 18,
        pageWidth: 80
      },
      lastSavedConfigs: {},
      candidateColors: [
        "#e9e6d0",
        "#f7edd4",
        "#eaf4e9",
        "#e9f4f6",
        "#f7e9e8",
        "#e6e6e6"
      ],
      fonts: ["雅黑", "宋体", "楷体"],
      selectedColor: "0", // need to restore color from localStorage
      selectedFont: "雅黑",
      fontSize: 18, // 默认字体大小
      pageWidth: 80, // 默认页面宽度
      selectedPageWidthButton: 'wide' // 新增属性，用于记录选中的按钮
    };
  },
  mounted() {
    // this.onSave()
    
  },
  methods: {
    selectFont(font) {
      this.selectedFont = font;
    },
    decreaseFontSize() {
      if (this.fontSize > 12) {
        this.fontSize--;
      }
    },
    increaseFontSize() {
      if (this.fontSize < 24) {
        this.fontSize++;
      }
    },
    decreasePageWidth() {
     this.pageWidth=60
     this.selectedPageWidthButton = 'narrow'
    },
    middlePageWidth(){
      this.pageWidth=80
      this.selectedPageWidthButton = 'middle'
    },
    increasePageWidth() {
      this.pageWidth=100
      this.selectedPageWidthButton = 'wide'
    },
    
    onSave() {
      this.configs.theme = "theme-" + this.selectedColor;
      this.configs.font = this.selectedFont;
      this.configs.fontSize = this.fontSize;
      this.configs.pageWidth = this.pageWidth;
      this.$emit("config-done", { save: true, configs: this.configs });
      this.lastSavedConfigs = this.configs;
    },
    onCancel() {
      this.selectedColor = this.theme2color(this.lastSavedConfigs.theme);
      this.selectedFont = this.lastSavedConfigs.font;
      this.fontSize = this.lastSavedConfigs.fontSize;
      this.pageWidth = this.lastSavedConfigs.pageWidth;
      this.$emit("config-done", { save: false });
    },
    theme2color(theme) {
      if (theme) {
        return theme.split('-')[1];
      } else {
        return '0';
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.config-pane
  padding 0 20px

.config-row
  height 60px
  line-height 60px

.config-footer
  text-align center
</style>


